<template>
  <el-main>
    <div class="flex">
      <el-button type="primary" @click="addBanner">添加</el-button>
      <div style="width: 200px;margin-left: 20px;">
        <el-input @keyup.enter.native="submit" @blur="submit" v-model="keywords" placeholder="请输入检索关键字"></el-input>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="sort" label="排序" width="180"> </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="des" label="描述"> </el-table-column>
      <el-table-column prop="href" label="跳转链接"> </el-table-column>
      <el-table-column prop="tpic" label="图片">
        <template slot-scope="scope">
          <img style="width: 100px;" :src="scope.row.tpic" alt="" />
        </template>
      </el-table-column>
      <el-table-column  prop="region_name" label="区域">
        
      </el-table-column>
      <el-table-column  label="是否显示" align="center">
        <template slot-scope="scope">
          <el-switch :active-value="1" :inactive-value="0" disabled v-model="scope.row.is_show" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </template>

      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <div>
            <el-button type="text" class="editText" @click="exitUser(scope.row)">修改</el-button>
            <el-button type="text" @click="labeClose(scope.row)" class="deletText">删除 </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="addLabelType ? '新增广告' : '修改广告'" :visible.sync="dialogAddlabel" @close="cancel">
      <el-form :model="addlabel">
        <el-form-item label="排序" label-width="120px">
          <el-input v-model="addlabel.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标题" label-width="120px">
          <el-input v-model="addlabel.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" label-width="120px">
          <el-input v-model="addlabel.des" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="跳转链接" label-width="120px">
          <el-input v-model="addlabel.href" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="区域" label-width="120px">
          <el-select @change="change" v-model="addlabel.id" placeholder="请选择">
            <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否显示" label-width="120px">
          <el-switch :active-value="1" :inactive-value="0" v-model="addlabel.is_show" active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="图片" label-width="120px">
          <el-upload :on-exceed="imgexceed" :limit="1" multiple :action="action" ref="upload1" list-type="picture-card"
            :on-change="handleChange" :before-upload="beforeAlbumUpload" :file-list="addlabel.fileList"
            :on-success="onSuccess" accept=".jpg,.jpeg,.png,.gif">
            <i slot="default" class="el-icon-plus"></i>
            <div v-loading="file.status == 'uploading'" slot="file" slot-scope="{ file }">
              <img style="position: absolute" class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirmLabel">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="确认要删除该广告吗？" :visible.sync="dialogDellabel" @close="cancel" width="30%">
      <div style="display: flex;
    justify-content: flex-end;">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="delLabel">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="d_img">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </el-main>
</template>

<script>
import {
  bannerList,
  bannerAdd,
  bannerEdit,
  bannerDel,
  bannerInfo,
  regionList
} from "@/api/configApi";
import { VUE_APP_BASE_API } from "@/config.js";
import { mapGetters } from "vuex";
export default {
  components: {},
  computed: {
    ...mapGetters(["type"]),
  },
  data() {
    return {
      dialogAddlabel: false,
      action: `${VUE_APP_BASE_API}/v1/config/upload`,
      addLabelType: true,
      dialogDellabel: false,
      region_id: this.$store.state.user.region_id,
      tableData: [],
      count: 0,
      page: 1,
      d_img: false,
      dialogImageUrl: "",
      limit: 10,
      addlabel: {
        id: "",
        banner_id: "",
        sort: 0,
        title: "",
        des: "",
        href: "",
        is_show: 1,
        fileList: [],
      },
      keywords: '',
      regionList: []
    };
  },
  async mounted() {
    this.bannerList();
    regionList().then(res => {
      this.regionList = res;
    })
  },
  methods: {
    change(val) {
      // this.addlabel.id = val;
      console.log(this.addlabel);
    },
    submit() {
      this.bannerList()
    },
    imgexceed() {
      this.$message.error("请删除照片后重新上传!");
    },
    onSuccess(response, file, fileList) {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      this.addlabel.fileList = fileList;
      console.log(this.addlabel.fileList);
    },
    handleRemove(file) {
      // 1.获取将要删除图片的临时路径
      const filePath = file.url;
      // 2.从pics数组中，找到图片对应的索引值
      const i = this.addlabel.fileList.findIndex((x) => x.url === filePath);
      // 3.调用splice方法，移除图片信息
      this.addlabel.fileList.splice(i, 1);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.d_img = true;
    },
    beforeAlbumUpload(file) {
      //上传前验证
      const isIMG = file.type.slice(0, 5) === "image";
      if (!isIMG) {
        this.$message.error("请上传图片!");
      }
      return isIMG;
    },
    handleChange(file, fileList) {
      this.addlabel.fileList = fileList;
    },
    delLabel() {
      bannerDel({
        banner_id: this.addlabel.id
      }).then(res => {
        this.cancel()
        this.bannerList();

        this.$message({
          message: "删除成功",
          type: "success",
        });
      })
    },
    labeClose(data) {
      this.addlabel.id = data.id
      this.dialogDellabel = true
    },
    confirmLabel() {
      if (this.addLabelType) {
        this.bannerAdd();
      } else {
        this.bannerEdit();
      }
    },
    bannerEdit() {
      let tpic = '';
      if (this.addlabel.fileList[0].response) {
        tpic = this.addlabel.fileList[0].response.data.url;
      } else {
        tpic = this.addlabel.fileList[0].url;
      }
      bannerEdit({
        ...this.addlabel,
        tpic: tpic,
        region_id: this.addlabel.id,
      }).then((res) => {
        this.dialogAddlabel = false;
        this.bannerList();
        this.$message({
          message: "修改成功",
          type: "success",
        });
      });
    },
    cancel() {
      this.addlabel = {
        sort: 0,
        title: "",
        des: "",
        href: "",
        is_show: 1,
        fileList: [],
      },
        this.dialogDellabel = false
      this.dialogAddlabel = false;
    },
    addBanner() {
      this.dialogAddlabel = true;
      this.addLabelType = true;
    },
    bannerAdd() {
      let tpic = '';
      if (this.addlabel.fileList[0].response) {
        tpic = this.addlabel.fileList[0].response.data.url;
      } else {
        tpic = this.addlabel.fileList[0].url;
      }
      bannerAdd({
        ...this.addlabel,
        tpic: tpic,
        region_id: this.addlabel.id,
      }).then((res) => {
        this.dialogAddlabel = false;
        this.bannerList();
        this.$message({
          message: "添加成功",
          type: "success",
        });
      });
    },
    bannerList() {
      bannerList({
        region_id: this.region_id,
        page: this.page,
        limit: this.limit,
        keywords: this.keywords
      }).then((res) => {
        this.tableData = res.list;
      });
    },
    exitUser(data) {
      this.addlabel.sort = data.sort
      this.addlabel.title = data.title
      this.addlabel.des = data.des
      this.addlabel.href = data.href
      this.addlabel.is_show = data.is_show
      this.addlabel.banner_id = data.id

      this.$set(this.addlabel, 'id', data.region_id)

      this.addlabel.fileList = [{
        url: data.tpic,
        name: data.tpic,
      }]
      console.log(this.addlabel);
      this.addLabelType = false
      this.dialogAddlabel = true
    },
  },
};
</script>

<style scoped lang="less">
.el-main {
  margin: 30px 15px;
}
</style>
